<template>
    <!--<div class="row">
        <div class="col-md-12">-->
            <div class="portlet light" :class="(bgColor ? 'bg-'+bgColor: '') + (sortable?' portlet-sortable':'')">
                <div class="portlet-title" :class="{'tabbable-line': tab}" v-if="caption || actions">
                    <div class="caption {{color? 'font-'+color:''}}" v-if="caption">
                        <i v-if="icon!=''" class="{{icon}} {{color? 'font-'+color:''}}"></i>
                        <span class="caption-subject  bold uppercase">{{title}}</span>
                        <span class="caption-helper">{{helper}}</span>
                    </div>
                    <div class="actions" v-if="actions">
                        <slot name="actions"></slot>
                    </div>
                    <div class="tools">
                        <slot name="tools"></slot>
                    </div>
                    <ul v-if="tab" class="nav nav-tabs">
                        <template v-for="t in tabHeaders">
                            <li :class="{active: t.active, disabled: t.disabled}">
                                <a :href="'javascript:;'" v-if="t.disabled">{{{t.header}}}</a>
                                <a :href="'#'+t.id" data-toggle="tab" v-else>{{{t.header}}}</a>
                            </li>
                        </template>
                    </ul>
                </div>
                <div v-if="!tab" class="portlet-body">
                    <slot></slot>
                </div>
                <div v-else  class="portlet-body">
                    <div class="tab-content">
                        <slot></slot>
                    </div>
                </div>
            </div>
        <!--</div>
    </div>-->
</template>

<script>
export default{
    props:{
        title:{
            type: String,
            default: ''
        },
        helper:{
            type: String,
            default: ''
        },
        caption:{
            type: Boolean,
            default: true,
        },
        actions:{
            type: Boolean,
            default: true
        },
        tab:{
            type:Boolean,
            default: false
        },
        sortable:{
            type: Boolean,
            default: false
        },
        bgColor:{
            type: String,
            default: ''
        },
        color:{
            type: String,
            default: ''
        },
        icon:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            tabHeaders: []
        }
    },
    compiled(){

        let noactive = true
        for(let i = 0;i<this.$children.length;i++){
            console.log(this.$children[i].$el)

            this.tabHeaders.push({
                header: this.$children[i].header,
                active: this.$children[i].active,
                id: this.$children[i].id,
                disabled: this.$children[i].disabled
            })

            if(this.$children[i].active){
                noactive = false
            }
        }

        if(noactive && this.$children.length>0){
           this.tabHeaders[0].active = true 
           this.$children[0].active = true
        }
    }
}
</script>